import { observer } from 'mobx-react-lite';
import { useEffect, useMemo } from 'react';
import { class_esy, isArray, isEmpty, useTableReducer } from 'esy-ui';
import dayjs from 'dayjs';
import { useFormatText } from '@/hooks';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { postAgentTeam } from '@/services';
import { Empty } from '@/components';

// const testd = [
//   {
//     DateId: 20241126,
//     InsertTime: '2024-11-26 13:26:07',
//     Depth: 1,
//     GameId: 1332215,
//     NickName: 'lhcagentts02',
//   },
//   {
//     DateId: 20241126,
//     InsertTime: '2024-11-26 13:25:46',
//     Depth: 1,
//     GameId: 1229625,
//     NickName: 'lhcagentts01',
//   },
// ];

function InviteList() {
  const { userInfo } = useUserInfoStore();
  const { changeState } = useGlobalStore();
  const [
    {
      data,
      pageIndex,
      pageSize,
      total,
      params: { StartTime, EndTime },
    },
    dispatch,
  ] = useTableReducer({ pageIndex: 1, total: 0, data: [], pageSize: 20, params: { StartTime: '1970-01-01', EndTime: dayjs().format('YYYY-MM-DD') } });
  const { text } = useFormatText();

  useEffect(() => {
    if (userInfo?.Token) {
      changeState('isLoading', true);
      postAgentTeam({ StartTime, EndTime, PageIndex: pageIndex, PageSize: pageSize })
        .then((res: any) => {
          dispatch({ type: 'success', payload: { data: res?.Data, total: res?.Count } });
        })
        .catch(() => {})
        .finally(() => {
          changeState('isLoading', false);
        });
    }
  }, [EndTime, StartTime, changeState, dispatch, pageIndex, pageSize, userInfo?.Token]);

  const totalPage = useMemo(() => Math.ceil(total / pageSize), [pageSize, total]);

  return (
    <div className='w-full h-tab-1 inline-flex align-top overflow-y-auto px-3 flex-col'>
      <div className='bg-color-20 flex items-center justify-between text-sm py-2 rounded-t'>
        <div className='flex-1 text-center'>{text('text_165')}</div>
        <div className='flex-1 text-center'>{text('username')}</div>
        <div className='flex-1 text-center'>{text('text_178')}ID</div>
      </div>
      {isArray(data) && !isEmpty(data) ? (
        (data as []).map((it: any, i) => (
          <div key={it.Id || i} className='bg-white flex items-center justify-between text-sm py-2 last:rounded-b'>
            <div className='flex-1 text-center text-desc'>{it?.DateId ? dayjs(`${it.DateId}`).format('YYYY-MM-DD') : ''}</div>
            <div className='flex-1 text-center truncate'>{it?.NickName}</div>
            <div className='flex-1 text-center'>{it?.GameId}</div>
          </div>
        ))
      ) : (
        <Empty />
      )}
      {totalPage > 1 ? (
        <div className='flex items-center justify-center text-sm my-3'>
          <div className={class_esy(['py-1 px-3 rounded', pageIndex > 1 ? 'bg-color-21 text-white' : 'bg-color-19 text-desc'])}>{text('text_167')}</div>
          <div className=' min-w-20 text-center'>
            <span className='text-color-21'>{pageIndex}</span>/{totalPage}
          </div>
          <div className={class_esy(['py-1 px-3 rounded', pageIndex < totalPage ? 'bg-color-21 text-white' : 'bg-color-19 text-desc'])}>{text('text_168')}</div>
        </div>
      ) : null}
    </div>
  );
}

export default observer(InviteList);
